<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
</head>
<body>
	<h1>发薪单</h1>
	<form action="toupdate" method="post" enctype="multipart/form-data">
		<input type="hidden" name="id" value="${paybill.id }"><br>
		发薪编号:<input type="text" name="code" value="${paybill.code }"><br>
		发薪单名称:<input type="text" name="name" value="${paybill.name }"><br>
		发薪单组织:
			<select name="companyId" data-com="${paybill.companyId }" onclick="comp()">
				<option value="">请选择</option>
			</select>
		<br>
		发薪单事业:
			<select name="businessId" data-bus="${paybill.businessId }" onclick="busin()">
				<option value="">请选择</option>
			</select>
		<br>
		发薪单部门:
		<select name="deptId" data-dept="${paybill.deptId }">
				<option value="">请选择</option>
			</select>
		<br>
		发薪单总金额:<input type="text" name="acount" value="${paybill.acount }"><br>
		发薪单计税文件:<input type="file" name="file">
		<input type="hidden" name="bills" value="${paybill.bills }">
		<br>
		<input type="text" name="createtime" value="<fmt:formatDate value="${paybill.createtime }" pattern="yyyy-MM-dd"/>">
		<h1>发薪人员</h1>
		<input type="button" value="增加发薪人员"  onclick="adduser()"><br>
		<c:forEach items="${paybill.users }" var="pu" varStatus="ind" >
		<span class="sl">
			员工姓名:<input type="text" name="users[${ind.index }].name" value="${pu.name }">
			员工类型:
			<select name="users[${ind.index }].type" >
				<c:forEach items="${typeenus }" var="typeenu">
					<c:if test="${typeenu.value==pu.type }">
						<option value="${typeenu.value }" selected="selected">${typeenu.value }</option> 
					</c:if>
					<c:if test="${typeenu.value!=pu.type }">
						<option value="${typeenu.value }">${typeenu.value }</option> 
					</c:if>
				</c:forEach>
			</select>
			员工金额:<input type="text" name="users[${ind.index }].price" value="${pu.price }">
			<input type="button" value="删除"  onclick="removeuser(this)"><br>
		</span>
		<c:if test="${ind.last }">
			<input type="hidden" id="coun" value="${ind.count }">
		</c:if>
		</c:forEach>
		<span id="sp"></span>
		<input type="submit" value="提交">
	</form>
	<script type="text/javascript">
	    var count = $(".sl").length;
		//var count = $("#coun").val();
		//var count = 0;
		var dataorganization=${organizations};
		var typeen=${typeen};
		$(function(){
			$.post(
				"getorganization",
				{},
				function(msg){
					for (var i = 0; i < msg.length; i++) {
						if (msg[i].parentId==0) {
							$("[name='companyId']").append('<option value="'+msg[i].id+'">'+msg[i].name+'</option>');		
						}
					}
					
					$("[name='companyId']").val($("[name='companyId']").data("com"));
					bus();
				},
				"json"
			)
		})
		function bus() {
			var num = $("[name='companyId']").data("com");
			for (var i = 0; i < dataorganization.length; i++) {
				if(dataorganization[i].parentId==num){
					$("[name='businessId']").append('<option value="'+dataorganization[i].id+'">'+dataorganization[i].name+'</option>');
				}
			}
			$("[name='businessId']").val($("[name='businessId']").data("bus"));
			dep();
		}
		function dep(){
			var num = $("[name='businessId']").data("bus");
			for (var i = 0; i < dataorganization.length; i++) {
				if(dataorganization[i].parentId==num){
					$("[name='deptId']").append('<option value="'+dataorganization[i].id+'">'+dataorganization[i].name+'</option>');
				}
			}
			$("[name='deptId']").val($("[name='deptId']").data("dept"));
		}
		function adduser(){
			 $("#sp").append('<span>员工姓名:<input type="text" name="users['+count+'].name"  >员工类型:<select name="users['+count+'].type" id="typeid'+count+'" ></select>员工金额:<input type="text" name="users['+count+'].price" ><input type="button" value="删除"  onclick="removeuser(this)"><br></span>');
			for (var i = 0; i < typeen.length; i++) {
				$("#typeid"+count).append('<option value="'+typeen[i]+'">'+typeen[i]+'</option>');
			}
			count++; 
		}
		function  removeuser(thiz){
			$(thiz).parent().remove();
		}
		function comp(){
			$("[name='businessId'] option:gt(0)").remove();
			var num = $("[name='companyId']").val();
			for (var i = 0; i < dataorganization.length; i++) {
				if(dataorganization[i].parentId==num){
					$("[name='businessId']").append('<option value="'+dataorganization[i].id+'">'+dataorganization[i].name+'</option>');
				}
			}
		}
		function busin(){
			$("[name='deptId'] option:gt(0)").remove();
			var num = $("[name='businessId']").val();
			for (var i = 0; i < dataorganization.length; i++) {
				if(dataorganization[i].parentId==num){
					$("[name='deptId']").append('<option value="'+dataorganization[i].id+'">'+dataorganization[i].name+'</option>');
				}
			}
		}
	</script>
</body>
</html>